<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    :title="title"
  >
    <div style="padding-bottom: 30px">
      <div style="position: relative; margin-top: 10px">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="b-b-d flx-row-s-c main-padding">
          <span class="f-14 c-black">域名：</span>
          <Input
            v-model.trim="domainName"
            placeholder="请输入"
            maxlength="30"
            style="width: 180px"
            @on-enter="pageChange(1)"
          />
          <div
            class="user-strong-button small-code-button"
            style="margin: 0 10px 0 30px"
            @click="pageChange(1)"
          >
            搜索
          </div>
          <div class="user-normal-button small-code-button" @click="reset">
            重置
          </div>
        </div>
        <div class="main-area b-b-d" ref="scrollArea">
          <table class="table-area">
            <thead>
              <tr>
                <th>
                  <div class="line-style" style="min-width: 48px">序号</div>
                </th>
                <th>
                  <div class="line-style">域名</div>
                </th>
                <th>
                  <div class="line-style">过期时间</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                class="lc-f"
                v-for="(item, index) in list"
                :key="item.domainName + index"
              >
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin" title="">{{
                      index + 1 + (page - 1) * pageSize
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin" :title="item.domainName">{{
                      item.domainName
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-o f-wrap" style="font-size: 12px">{{
                      item.expireTime
                    }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flx-row-c-c" style="margin: 10px 20px 0">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            @on-change="pageChange"
            show-elevator
            show-total
          />
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="cancel"
        >
          确定
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { getTemplatesDomain } from "@/api/user";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    templateId: {
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      pageSize: 10,
      page: 1,
      total: null,
      list: [],
      domainName: "",
    };
  },
  watch: {
    show: {
      handler(newValue) {
        if (newValue) {
          this.domainName = "";
          this.page = 1;
          this.list = [];
          this.total = null;
          this.getList();
        }
      },
    },
  },
  methods: {
    cancel() {
      this.config = false;
    },
    // 切换页码
    pageChange(page) {
      this.$refs.scrollArea.scrollTop = 0;
      this.page = page;
      this.getList();
    },
    // 重置
    reset() {
      this.domainName = "";
      this.page = 1;
      this.getList();
    },
    // 获取列表
    async getList() {
      if (!this.templateId) {
        this.config = false;
        return;
      }
      this.loading = true;
      let params = {
        domainName: this.domainName,
        templateId: this.templateId,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getTemplatesDomain(params);
      if (res.code == 200) {
        this.list = res.data.info.list;
        this.total = res.data.info.total;
      }
      this.loading = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.main-padding {
  padding: 15px 20px;
}
.main-area {
  padding: 15px 20px;
  max-height: 330px;
  overflow-y: auto;
}
</style>